<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.min.js"></script>
  <script src="data.js"></script>
  <style>
    .tags{
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: space-between;
        
    }
    .tag{
        background-color: #e0e0e0;
        cursor: pointer;
        flex: 1;
        text-wrap:nowrap;
    }
    .tag.active{
        background-color: red;
    }
    .icon{
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }
  </style>
</head>
<body>
  <div id="app">
    blessings:
    <div class="tags">
      <div class="tag" :class="{active:item.selected}" @click="selected(idx)" v-for="item,idx in blessings" :key="idx">
        <img class="icon" :src="`img/${item.name}.webp`" >
        {{item.name}}
    </div>
    </div>
    <div style="margin: 20px;">
        <textarea rows="10" style="width: 100%;" v-model="blessingsResult"></textarea>
    </div>
    <div>
      gold:230,213,226,192,178,134,241,64,13,149,142,159,86,244,11,65
    </div>
    <div>
      //xbox 存档位置systemappdata\wgs\
    </div>
  </div>
</body>
<script>
    //xbox 存档位置systemappdata\wgs\xxxxxx
    //gold:230,213,226,192,178,134,241,64,13,149,142,159,86,244,11,65
    //"blessings":[{"relicDataID":"6af9b270-c064-484b-8da4-d4a22d2fecff"},{"relicDataID":"fecb41b4-fd26-4f5c-aa1b-84152e090fa2"},{"relicDataID":"98989cbb-c729-4f87-8240-08f448db96d8"},{"relicDataID":"410ba540-7c4f-4dc5-a84f-b1d8af508891"},{"relicDataID":"68ef2523-5c2e-4660-b96d-00b1c0485f54"},{"relicDataID":"d2de397e-6fce-442f-a9e4-c3f3ee7bdbcf"},{"relicDataID":"4190af4b-a32f-42ab-acda-8f0d4f50c3a5"},{"relicDataID":"b7822614-96ec-4ace-9029-6efc8adef374"},{"relicDataID":"cb74adcf-b463-4424-a519-d1098ecd5373"},{"relicDataID":"9e0deb69-6196-44a6-8220-85bd0df25f77"},{"relicDataID":"088041a7-fdbf-43d7-8ee6-b6720ce747b8"},{"relicDataID":"5a96d89f-d7c0-49fa-88d1-8ec75a8f3140"}]
  var app = new Vue({
  el: '#app',
  data: {
    blessings:blessings.map(v=>({...v,selected:false})),
    blessingsSelected:[],

  }, 
  computed:{
    blessingsResult(){
        var x=[...this.blessingsSelected];
        x.sort()
        return JSON.stringify(x.map(v=>({
            //idx:v,
            "relicDataID":this.blessings[v].id,
            //name:this.blessings[v].name
        })))
    }
  },
  methods:{
    selected(idx){
        var _idx = this.blessingsSelected.indexOf(idx);

        if(_idx!=-1){
            this.blessings[idx].selected=false
            this.blessingsSelected.splice(_idx,1)
        }else{
            this.blessings[idx].selected=true;
            this.blessingsSelected.push(idx);
        }
    }
  }
})
</script>
</html>